<template>
  <div
    class="tile"
    :element-loading-text="loadText"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    v-loading="loading"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item title="坐标属性" name="1">
        <template #title>
          <div class="collapse-title">
            坐标属性
            <el-button v-if="store.loginInfo.isroot == 0" size="small" style="margin-left: 10px" @click.stop="onSave">保存</el-button>
            <el-button size="small" style="margin-left: 10px" @click.stop="onFlyTo">定位</el-button>
          </div>
        </template>

        <el-row :gutter="10" class="row">
          <el-col :span="3">经度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.lng" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="3">纬度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.lat" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="3">高度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.alt" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="6">方向角:</el-col>
          <el-col :span="18">
            <el-input
              type="number"
              v-model="inputData.heading"
              @input="onChangeStyle($event,'heading')"
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="6">俯仰角:</el-col>
          <el-col :span="18">
            <el-input
              type="number"
              v-model="inputData.pitch"
              @input="onChangeStyle($event,'pitch')"
            ></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="6">滚转角:</el-col>
          <el-col :span="18">
            <el-input type="number" v-model="inputData.roll" @input="onChangeStyle($event,'roll')"></el-input>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  ref,
  reactive
} from "vue";
import SvgIcon from "../../../components/SvgIcon.vue";
import { updateLayerdataJson } from "../../../api/system.js";
import {
  transform,
  getMatrix4ByTransform
} from "../../../../static/CIM/BQGIS-load/index";
import { useStore } from "../../../store/store"
import { getModelById } from "../../../../static/CIM/BQGIS-load/index";
import { ElMessage } from "element-plus";
// const emit = defineEmits(["update:modelValue", false]);

const store = useStore()
const props = defineProps({
  layerId: {
    type: String
  }
});

const layer = getModelById(props.layerId);
const activeNames = ref(["1"]);
const loading = ref(false);
const loadText = ref("");
console.log(layer, "layer");
const inputData = reactive({
  position: {
    lng: layer.coordinate[0],
    lat: layer.coordinate[1],
    alt: layer.coordinate[2]
  },
  heading: layer.heading,
  pitch: layer.pitch,
  roll: layer.roll
});

layer.on(
  [
    mars3d.EventType.editStart,
    mars3d.EventType.editMovePoint,
    mars3d.EventType.editStyle,
    mars3d.EventType.editRemovePoint
  ],
  function(event) {
    inputData.position = {
      lng: layer.coordinate[0],
      lat: layer.coordinate[1],
      alt: layer.coordinate[2]
    };
    (inputData.heading = layer.heading),
      (inputData.pitch = layer.pitch),
      (inputData.roll = layer.roll);
  }
);

onUnmounted(() => {
  layer.off([
    mars3d.EventType.editStart,
    mars3d.EventType.editMovePoint,
    mars3d.EventType.editStyle,
    mars3d.EventType.editRemovePoint
  ]);
});

function onChangeProperty() {
  layer.setOptions(inputData);
}

function onChangeStyle(value, key) {
  layer.setStyle({
    [key]: value
  });
}

function onFlyTo() {
  layer.flyTo();
}

function onSave() {
  loadText.value = "正在保存";
  loading.value = true;
  updateLayerdataJson({
    id: props.layerId,
    json: JSON.stringify(isEmpty(inputData))
  })
    .then(res => {
      ElMessage({
        message: res.msg
      });
    })
    .catch(err => {
      console.error(err);
      ElMessage({
        message: "编辑失败",
        type: "warning"
      });
    })
    .finally(() => {
      loading.value = false;
    });
}

// 深拷贝，并去除空值（null,undefined,空字符串）
function isEmpty(obj) {
  let objClone = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === "object") {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = isEmpty(obj[key]);
        } else {
          if (obj[key] == null || obj[key] == "") continue;
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}
</script>

<style lang="scss" scoped>
.tile {
  height: 300px;
  width: 380px;
  overflow: auto;
  padding: 0 10px;
}
.collapse-title {
  display: flex;
  align-items: center;
}
:deep(.el-collapse) {
  border-color: transparent;
}
:deep(.el-collapse-item__header) {
  background-color: rgba($color: #000, $alpha: 0.4);
  border-color: transparent;
  padding-left: 5px;
  color: #fff;
}
:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border-color: transparent;
  padding-left: 10px;
  color: #fff;
}
.row {
  display: flex;
  align-items: center;
  color: #fff;
  margin: 10px 0;
}
</style>